<template>
    <el-drawer
        v-model="isShow"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :destroy-on-close="true"
        :show-close="false"
        :title="title"
        size="50%"
    >
        <el-form
            :model="queryForm"
            label-position="left"
            label-width="auto"
        >
            <DividerHeader title="基本信息"/>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item class="image__error" label-position="top">
                        <el-image :fit="'contain'" :src="queryForm.photourl">
                            <template #error>
                                <div class="image-slot">
                                    <el-icon>
                                        <Picture/>
                                    </el-icon>
                                    暂无证件照
                                </div>
                            </template>
                        </el-image>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="姓名：">
                        <el-input v-model="queryForm.name" disabled placeholder="请填写来访姓名"/>
                    </el-form-item>
                    <el-form-item label="性别：">
                        <el-radio-group v-model="queryForm.sex" disabled>
                            <el-radio-button
                                v-for="item in nj_sex"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="进入时间：">
                        <el-date-picker
                            v-model="queryForm.checkintime"
                            disabled
                            placeholder="请选择来访时间"
                            style="width: 100%"
                            type="datetime"
                            value-format="YYYY-MM-DD HH:mm:ss"
                        />
                    </el-form-item>
                    <el-row :gutter="24">
                        <el-col :span="24">
                            <el-form-item label="身份证：">
                                <el-input
                                    v-model="queryForm.sfzId"
                                    disabled
                                    placeholder="请填写来访人身份证"
                                />
                            </el-form-item>
                        </el-col>
                        <!--                        <el-col :span="3">-->
                        <!--                            <el-button-->
                        <!--                                type="primary"-->
                        <!--                                @click="visitHistoryRef.showVisitHistory(queryForm.sfzId)"-->
                        <!--                            >-->
                        <!--                                历史信访记录-->
                        <!--                            </el-button>-->
                        <!--                        </el-col>-->
                    </el-row>
                </el-col>
            </el-row>

            <div class="my-2"></div>

            <DividerHeader title="来访信息"/>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="关注级别：">
                        <el-radio-group v-model="queryForm.alertlever" disabled>
                            <el-radio-button
                                v-for="item in nj_laifang_color"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="来访事由：" prop="checkinreason" required>
                        <el-radio-group v-model="queryForm.checkinreason" disabled>
                            <el-radio-button
                                v-for="item in nj_checkinreason"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="警务区：">
                        <el-input v-model="queryForm.policeareaName" disabled/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="访问部门：">
                        <el-input
                            v-model="queryForm.checkindepartment"
                            disabled
                            placeholder="请填写访问部门"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="安检情况：" label-position="top">
                        <el-input
                            v-model="queryForm.checkinfo"
                            :autosize="{ minRows: 1, maxRows: 9999}"
                            :rows="3"
                            disabled
                            placeholder="请填写安检情况"
                            type="textarea"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="来访者地址：" label-position="top">
                        <el-input
                            v-model="queryForm.address"
                            :autosize="{ minRows: 1, maxRows: 9999}"
                            :rows="3"
                            disabled
                            placeholder="请填写来访者地址"
                            type="textarea"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="寄存物品：" label-position="top">
                        <el-input
                            v-model="queryForm.goods"
                            :autosize="{ minRows: 1, maxRows: 9999}"
                            :rows="3"
                            disabled
                            placeholder="请填写寄存物品"
                            type="textarea"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="信访情况：" label-position="top">
                        <el-input
                            v-model="queryForm.checkininfo"
                            :autosize="{ minRows: 1, maxRows: 9999}"
                            disabled
                            placeholder="请填写信访情况"
                            type="textarea"
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <div class="my-1"></div>
            <DividerHeader title="预案信息"/>
            <el-form-item label="处理预案：">
                <PlanManageSelect v-model="queryForm.yuanId" disabled @planDetail="getPlanDetail"/>
            </el-form-item>
            <el-form-item>
                <el-input v-model="measure" :rows="9" disabled type="textarea"/>
            </el-form-item>
        </el-form>

<!--        <VisitHistory ref="visitHistoryRef"/>-->
        <DividerHeader title="历史信访记录"/>
        <el-alert :closable="false" :title="historyTitle" class="mb-2" type="success"/>
        <el-table
            v-loading="loading"
            :data="visitHistoryTableData"
            border
            show-overflow-tooltip
        >
            <el-table-column type="index"/>
            <el-table-column label="接待单位" prop="unitName"/>
            <el-table-column label="接待场所" prop="policeareaId"/>
            <el-table-column label="执勤法警" prop="adduserId"/>
            <el-table-column label="来访人" prop="name"/>
            <el-table-column label="来访日期" prop="checkintime"/>
            <el-table-column label="信访情况" prop="checkininfo"/>
        </el-table>

        <template #footer>
            <el-button v-if="queryForm.photourl" type="primary" @click="addKeyPersonManage">添加重点人员</el-button>
            <el-button @click="changeShowStatus">关闭</el-button>
        </template>
    </el-drawer>
</template>

<script setup>
import {getVisitDetailApi, getVisitHistoryApi} from '@/api/RegisterVisit/RegisterVisit.js';
import {getPlanInfo} from '@/api/PlanManage/Plan.js';
import PlanManageSelect from '@/components/PlanManageSelect/PlanManageSelect.vue';
import VisitHistory from '@/views/PoliceWork/RegistVisit/components/VisitHistory.vue';
import {useTemplateRef} from 'vue';
import DividerHeader from '@/components/DividerHeader/DividerHeader.vue';
import {ElMessage, ElMessageBox} from 'element-plus';
import {createKeyPersonManage, getKeyPersonManageListNoLimit} from '@/api/PlanManage/KeyPersonManage.js';
import {getPoliceAreaInfo} from '@/api/PoliceAreaManage/PoliceAreaManage.js';

const {proxy} = getCurrentInstance()
const {nj_laifang_color, nj_sex, nj_checkinreason} = proxy.useDict('nj_laifang_color', 'nj_sex', 'nj_checkinreason')

defineOptions({
    name: 'RegisterVisitReview'
})

const isShow = ref(false)
const title = ref('来访登记');
// 预案处置方案
const measure = ref('');
// 来访登记 ID
const visitId = ref('')

const loading = ref(false)
const historyTitle = ref('')
const visitHistoryTableData = ref([])

const queryForm = ref({})

// 变更显示状态
const changeShowStatus = () => {
    isShow.value = !isShow.value
    if (!isShow.value) {
        queryForm.value = {}
        visitId.value = ''
        measure.value = ''
    }
}

const showVisitDetail = async (id) => {
    changeShowStatus()
    visitId.value = id
    await getDetail();
}
defineExpose({showVisitDetail});

const visitHistoryRef = useTemplateRef('visitHistoryRef')


// 获取来访登记详情
const getDetail = async () => {
    const res = await getVisitDetailApi(visitId.value)
    queryForm.value = res.data
    const qwq = await getPoliceAreaInfo(res.data.policeareaId)
    queryForm.value.policeareaName = qwq.data?.areaname || '';
    if (res.data.yuanId) {
        await getPlanDetail(res.data.yuanId);
    }
    if (res.data.sfzId) {
        console.log(res.data.sfzId)
        await getHistoryList();
    }
}
// 获取预案详情
const getPlanDetail = async (queryId) => {
    if (!queryId) {
        measure.value = ''
        return;
    }
    const res = await getPlanInfo(queryId);
    measure.value = res.data.measure;
}

// 添加重点人员
const addKeyPersonManage = async () => {
    try {
        const confirmResult = await ElMessageBox.confirm(
            '确定将此人添加至重点对象管理?',
            '',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'success',
            }
        );

        if (confirmResult !== 'confirm') return;

        const submitStatus = await checkSubmitKeyStatus();

        await createKeyPersonManage({
            // 身份证
            idnumber: queryForm.value.sfzId,
            name: queryForm.value.name,
            // 性别
            sex: queryForm.value.sex,
            // 预警级别
            warninglevel: '1',
            // 状态
            state: '0',
            // 图片地址
            photo: queryForm.value.photourl
        })
        ElMessage.success('添加成功');
    } catch (error) {
        ElMessage.error('当前人员已在重点人员观测数据中，请勿重复添加。');
    }
}


// 检测是否可以添加重点人员
const checkSubmitKeyStatus = async () => {
    const res = await getKeyPersonManageListNoLimit({
        idnumber: queryForm.value.sfzId
    })

    return new Promise((resolve, reject) => {
        if (res.total === 0) {
            return resolve(true)
        }

        return reject(false)
    })
}


// 获取来访历史数据列表
const getHistoryList = async () => {
    loading.value = true;
    const res = await getVisitHistoryApi({
        sfzId: queryForm.value.sfzId
    })
    // total.value = res.data;
    visitHistoryTableData.value = res.data;
    historyTitle.value = `共计 [ ${res.data.length} ] 次来访记录`
    loading.value = false;
}

</script>

<style lang="scss" scoped>
.image__error .el-image {
    --img-height: 12.5rem;
    background: var(--el-fill-color-light);
    padding: 0 5px;
    max-width: 100%;
    max-height: var(--img-height);
    width: 100%;
    height: var(--img-height);
    border-radius: 5px;
}

.image__error .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--el-fill-color-light);
    color: var(--el-text-color-secondary);
    font-size: 30px;
}
</style>